<template>
  <el-card class="risk-chart-container" shadow="hover" :bordered="false">
    <!-- 图表标题和操作 -->
    <template #header>
      <div class="chart-header">
        <h3 class="chart-title">{{ title || '风险评估图表' }}</h3>
        <div class="chart-controls" v-if="showControls">
          <el-select 
            v-model="chartType" 
            placeholder="图表类型" 
            size="small"
            @change="updateChart"
            class="control-select"
          >
            <el-option label="柱状图" value="bar" />
            <el-option label="折线图" value="line" />
            <el-option label="饼图" value="pie" />
            <el-option label="雷达图" value="radar" />
          </el-select>
          
          <el-select 
            v-model="timeRange" 
            placeholder="时间范围" 
            size="small"
            @change="updateChart"
            class="control-select"
          >
            <el-option label="今日" value="today" />
            <el-option label="近7天" value="7d" />
            <el-option label="近30天" value="30d" />
            <el-option label="近90天" value="90d" />
          </el-select>
          
          <el-button 
            v-if="allowRefresh" 
            type="text" 
            icon="RefreshRight" 
            size="small"
            @click="refreshChart"
            :loading="isRefreshing"
            :disabled="isRefreshing"
            class="refresh-btn"
            :title="isRefreshing ? '刷新中...' : '刷新数据'"
          />
        </div>
      </div>
    </template>
    
    <!-- 统计卡片 -->
    <div v-if="showStats" class="stats-cards">
      <el-statistic
        v-for="stat in statsData"
        :key="stat.type"
        class="stat-card"
        :class="stat.type"
        :value="stat.count"
        :precision="0"
        :value-style="{ color: stat.color }"
      >
        <template #prefix>
          <el-icon :size="20" :style="{ color: stat.color }">
            <component :is="stat.icon" />
          </el-icon>
        </template>
        <template #suffix>{{ stat.label }}</template>
        <template #title>
          <span :style="{ color: stat.color, fontSize: '14px' }">{{ stat.title }}</span>
        </template>
      </el-statistic>
    </div>
    
    <!-- 图表容器 -->
    <div ref="chartRef" class="chart-wrapper" v-loading="isLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
    </div>
    
    <!-- 图例说明 -->
    <div class="chart-legend" v-if="showLegend && legendItems.length > 0">
      <div class="legend-item" v-for="item in legendItems" :key="item.type">
        <span class="legend-color" :style="{ backgroundColor: item.color }" :title="item.label"></span>
        <span class="legend-text">{{ item.label }} ({{ item.count }} 个)</span>
        <el-progress 
          v-if="item.percentage > 0" 
          :percentage="item.percentage" 
          :stroke-width="4" 
          :show-text="false" 
          :color="item.color" 
          class="legend-progress"
        />
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import { 
  Warning, 
  InfoFilled, 
  SuccessFilled, 
  RefreshRight, 
  TrendingUp, 
  TrendingDown 
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// Props
const props = defineProps({
  // 图表数据
  data: {
    type: Array,
    default: () => []
  },
  
  // 图表标题
  title: {
    type: String,
    default: ''
  },
  
  // 是否显示控制选项
  showControls: {
    type: Boolean,
    default: true
  },
  
  // 是否显示图例
  showLegend: {
    type: Boolean,
    default: true
  },
  
  // 图表类型 (bar, line, pie, radar)
  initialChartType: {
    type: String,
    default: 'bar'
  },
  
  // 时间范围
  initialTimeRange: {
    type: String,
    default: '30d'
  },
  
  // 是否显示统计卡片
  showStats: {
    type: Boolean,
    default: true
  },
  
  // 允许手动刷新
  allowRefresh: {
    type: Boolean,
    default: true
  },
  
  // 自动刷新时间间隔（毫秒），0表示不自动刷新
  autoRefreshInterval: {
    type: Number,
    default: 30000
  }
})

// 组件状态
const chartRef = ref(null)
const chartInstance = ref(null)
const chartType = ref(props.initialChartType)
const timeRange = ref(props.initialTimeRange)
const isLoading = ref(false)
const isRefreshing = ref(false)
let refreshTimer = null

// 图例数据
const legendItems = ref([
  { type: 'high', label: '高风险', color: '#ff4d4f', count: 0, percentage: 0 },
  { type: 'medium', label: '中风险', color: '#fa8c16', count: 0, percentage: 0 },
  { type: 'low', label: '低风险', color: '#52c41a', count: 0, percentage: 0 }
])

// 统计卡片数据
const statsData = computed(() => {
  const total = legendItems.value.reduce((sum, item) => sum + item.count, 0)
  return [
    {
      type: 'high-risk',
      title: '高危漏洞',
      label: '个',
      count: legendItems.value.find(item => item.type === 'high')?.count || 0,
      color: '#ff4d4f',
      icon: Warning
    },
    {
      type: 'medium-risk',
      title: '中危漏洞',
      label: '个',
      count: legendItems.value.find(item => item.type === 'medium')?.count || 0,
      color: '#fa8c16',
      icon: InfoFilled
    },
    {
      type: 'low-risk',
      title: '低危漏洞',
      label: '个',
      count: legendItems.value.find(item => item.type === 'low')?.count || 0,
      color: '#52c41a',
      icon: SuccessFilled
    },
    {
      type: 'total-risk',
      title: '总漏洞数',
      label: '个',
      count: total,
      color: '#1890ff',
      icon: TrendingUp
    }
  ]
})

// 初始化图表
onMounted(() => {
  nextTick(() => {
    initChart()
    updateChartData()
    startAutoRefresh()
  })
})

// 监听数据变化
watch(() => props.data, () => {
  updateChartData()
}, { deep: true })

// 监听图表类型变化
watch(() => [chartType.value, timeRange.value], () => {
  updateChart()
})

// 监听自动刷新配置变化
watch(() => props.autoRefreshInterval, () => {
  restartAutoRefresh()
})

// 清理图表实例
onUnmounted(() => {
  stopAutoRefresh()
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

// 初始化图表实例
const initChart = () => {
  if (!chartRef.value) return
  
  // 销毁已存在的图表实例
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
  
  chartInstance.value = echarts.init(chartRef.value)
  
  // 添加鼠标事件增强交互体验
  chartInstance.value.on('click', handleChartClick)
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', handleResize)
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize()
  }
}

// 处理图表点击事件
const handleChartClick = (params) => {
  // 可以在这里添加点击事件处理逻辑
  // 例如：跳转到相应的漏洞详情页面
  // ElMessage(`点击了 ${params.name}, 值为 ${params.value}`)
}

// 更新图表数据
const updateChartData = async () => {
  isLoading.value = true
  
  try {
    // 模拟数据加载延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    if (!props.data || props.data.length === 0) {
      renderEmptyChart()
      return
    }
    
    // 更新图例统计数据
    updateLegendStats()
    
    // 渲染图表
    updateChart()
  } catch (error) {
    console.error('更新图表数据失败:', error)
    ElMessage.error('更新图表数据失败')
    renderErrorChart()
  } finally {
    isLoading.value = false
  }
}

// 刷新图表数据
const refreshChart = async () => {
  if (isRefreshing.value) return
  
  isRefreshing.value = true
  
  try {
    await updateChartData()
    ElMessage.success('图表数据已刷新')
  } catch (error) {
    console.error('刷新图表数据失败:', error)
    ElMessage.error('刷新图表数据失败')
  } finally {
    isRefreshing.value = false
  }
}

// 更新图例统计数据
const updateLegendStats = () => {
  // 重置计数
  legendItems.value.forEach(item => {
    item.count = 0
    item.percentage = 0
  })
  
  // 统计各风险等级的数量
  props.data.forEach(item => {
    const severity = item.severity || 'low'
    const legendItem = legendItems.value.find(l => l.type === severity)
    if (legendItem) {
      legendItem.count++
    }
  })
  
  // 计算百分比
  const total = legendItems.value.reduce((sum, item) => sum + item.count, 0)
  if (total > 0) {
    legendItems.value.forEach(item => {
      item.percentage = Math.round((item.count / total) * 100)
    })
  }
  
  // 按数量降序排序
  legendItems.value.sort((a, b) => b.count - a.count)
}

// 更新图表
const updateChart = () => {
  if (!chartInstance.value || !props.data || props.data.length === 0) {
    return
  }
  
  let option = null
  
  try {
    switch (chartType.value) {
      case 'bar':
        option = getBarChartOption()
        break
      case 'line':
        option = getLineChartOption()
        break
      case 'pie':
        option = getPieChartOption()
        break
      case 'radar':
        option = getRadarChartOption()
        break
      default:
        option = getBarChartOption()
    }
    
    // 确保option对象有效
    if (option && typeof option === 'object') {
      chartInstance.value.setOption(option, true)
    } else {
      console.error('图表配置无效:', option)
      renderErrorChart()
    }
  } catch (error) {
    console.error('渲染图表时出错:', error)
    renderErrorChart()
  }
}

// 渲染空图表
const renderEmptyChart = () => {
  if (!chartInstance.value) return
  
  const emptyOption = {
    title: {
      text: '暂无数据',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#909399',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {},
    xAxis: { show: false },
    yAxis: { show: false },
    series: [],
    graphic: [
      {
        type: 'image',
        id: 'emptyImage',
        left: 'center',
        top: '40%',
        z: 100,
        bounding: 'raw',
        origin: [75, 75],
        style: {
          image: '',
          width: 150,
          height: 150,
          opacity: 0.3
        }
      }
    ]
  }
  
  chartInstance.value.setOption(emptyOption, true)
}

// 渲染错误图表
const renderErrorChart = () => {
  if (!chartInstance.value) return
  
  const errorOption = {
    title: {
      text: '数据加载失败',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#ff4d4f',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {},
    xAxis: { show: false },
    yAxis: { show: false },
    series: []
  }
  
  chartInstance.value.setOption(errorOption, true)
}

// 获取空图表配置
const getEmptyChartOption = () => {
  return {
    title: {
      text: '暂无数据',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#909399',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {},
    xAxis: { show: false },
    yAxis: { show: false },
    series: []
  }
}

// 启动自动刷新
const startAutoRefresh = () => {
  if (props.autoRefreshInterval > 0 && !refreshTimer) {
    refreshTimer = setInterval(() => {
      updateChartData()
    }, props.autoRefreshInterval)
  }
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
  }
}

// 重启自动刷新
const restartAutoRefresh = () => {
  stopAutoRefresh()
  startAutoRefresh()
}

// 获取柱状图配置
const getBarChartOption = () => {
  // 安全检查：确保有数据
  if (!props.data || props.data.length === 0) {
    return getEmptyChartOption()
  }
  
  // 按日期分组数据
  const groupedData = groupDataByDate()
  
  // 提取日期和各风险等级数据
  const dates = Object.keys(groupedData).sort()
  const highRiskData = dates.map(date => groupedData[date].high || 0)
  const mediumRiskData = dates.map(date => groupedData[date].medium || 0)
  const lowRiskData = dates.map(date => groupedData[date].low || 0)
  
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params) => {
        let result = params[0].axisValue + '<br/>'
        params.forEach(param => {
          result += `${param.marker}${param.seriesName}: ${param.value} 个<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['高风险', '中风险', '低风险'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        interval: Math.floor(dates.length / 10), // 控制显示的标签数量
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '漏洞数量',
      minInterval: 1
    },
    series: [
      {
        name: '高风险',
        type: 'bar',
        data: highRiskData,
        itemStyle: {
          color: '#ff4d4f'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: '中风险',
        type: 'bar',
        data: mediumRiskData,
        itemStyle: {
          color: '#fa8c16'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: '低风险',
        type: 'bar',
        data: lowRiskData,
        itemStyle: {
          color: '#52c41a'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

// 获取折线图配置
const getLineChartOption = () => {
  // 安全检查：确保有数据
  if (!props.data || props.data.length === 0) {
    return getEmptyChartOption()
  }
  
  // 按日期分组数据
  const groupedData = groupDataByDate()
  
  // 提取日期和各风险等级数据
  const dates = Object.keys(groupedData).sort()
  const highRiskData = dates.map(date => groupedData[date].high || 0)
  const mediumRiskData = dates.map(date => groupedData[date].medium || 0)
  const lowRiskData = dates.map(date => groupedData[date].low || 0)
  
  // 计算总风险评分
  const totalRiskScores = dates.map(date => {
    const data = groupedData[date]
    return (data.high || 0) * 8 + (data.medium || 0) * 4 + (data.low || 0) * 2
  })
  
  return {
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let result = params[0].axisValue + '<br/>'
        params.forEach(param => {
          result += `${param.marker}${param.seriesName}: ${param.value}<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['高风险', '中风险', '低风险', '总风险评分'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        interval: Math.floor(dates.length / 10), // 控制显示的标签数量
        rotate: 45
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '漏洞数量',
        minInterval: 1,
        position: 'left'
      },
      {
        type: 'value',
        name: '风险评分',
        minInterval: 1,
        position: 'right'
      }
    ],
    series: [
      {
        name: '高风险',
        type: 'line',
        data: highRiskData,
        itemStyle: {
          color: '#ff4d4f'
        },
        symbol: 'circle',
        symbolSize: 8
      },
      {
        name: '中风险',
        type: 'line',
        data: mediumRiskData,
        itemStyle: {
          color: '#fa8c16'
        },
        symbol: 'circle',
        symbolSize: 8
      },
      {
        name: '低风险',
        type: 'line',
        data: lowRiskData,
        itemStyle: {
          color: '#52c41a'
        },
        symbol: 'circle',
        symbolSize: 8
      },
      {
        name: '总风险评分',
        type: 'line',
        data: totalRiskScores,
        yAxisIndex: 1,
        itemStyle: {
          color: '#722ed1'
        },
        symbol: 'diamond',
        symbolSize: 10,
        smooth: true,
        lineStyle: {
          width: 3
        }
      }
    ]
  }
}

// 获取饼图配置
const getPieChartOption = () => {
  // 统计各风险等级的数量
  const stats = {
    high: props.data.filter(item => item.severity === 'high').length,
    medium: props.data.filter(item => item.severity === 'medium').length,
    low: props.data.filter(item => item.severity === 'low').length
  }
  
  // 准备饼图数据
  const pieData = [
    {
      value: stats.high,
      name: '高风险',
      itemStyle: { color: '#ff4d4f' }
    },
    {
      value: stats.medium,
      name: '中风险',
      itemStyle: { color: '#fa8c16' }
    },
    {
      value: stats.low,
      name: '低风险',
      itemStyle: { color: '#52c41a' }
    }
  ].filter(item => item.value > 0)
  
  // 按漏洞类型统计
  const typeStats = {};
  props.data.forEach(item => {
    const type = item.vuln_type || 'unknown'
    if (!typeStats[type]) {
      typeStats[type] = 0
    }
    typeStats[type]++
  })
  
  const typePieData = Object.entries(typeStats).map(([type, count], index) => ({
    value: count,
    name: getVulnTypeLabel(type),
    itemStyle: {
      color: getColorByIndex(index)
    }
  }))
  
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      bottom: 0,
      left: 'center'
    },
    series: [
      {
        name: '风险等级分布',
        type: 'pie',
        radius: ['20%', '40%'],
        center: ['25%', '50%'],
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          formatter: '{b}\n{c}个\n({d}%)'
        }
      },
      {
        name: '漏洞类型分布',
        type: 'pie',
        radius: ['20%', '40%'],
        center: ['75%', '50%'],
        data: typePieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          formatter: '{b}\n{c}个\n({d}%)'
        }
      }
    ]
  }
}

// 获取雷达图配置
const getRadarChartOption = () => {
  // 按漏洞类型和风险等级统计
  const typeStats = {};
  const riskTypeStats = {
    high: {},
    medium: {},
    low: {}
  }
  
  props.data.forEach(item => {
    const type = item.vuln_type || 'unknown'
    const severity = item.severity || 'low'
    
    // 统计总数量
    if (!typeStats[type]) {
      typeStats[type] = 0
    }
    typeStats[type]++
    
    // 按风险等级统计
    if (!riskTypeStats[severity][type]) {
      riskTypeStats[severity][type] = 0
    }
    riskTypeStats[severity][type]++
  })
  
  // 准备雷达图数据
  const types = Object.keys(typeStats)
  const maxValue = Math.max(...Object.values(typeStats)) + 1
  
  // 生成雷达图指标
  const indicators = types.map(type => ({
    name: getVulnTypeLabel(type),
    max: maxValue
  }))
  
  // 准备雷达图数据系列
  const series = [
    {
      name: '高风险',
      type: 'radar',
      data: [{
        value: types.map(type => riskTypeStats.high[type] || 0),
        name: '高风险',
        areaStyle: {
          opacity: 0.3
        },
        itemStyle: {
          color: '#ff4d4f'
        }
      }]
    },
    {
      name: '中风险',
      type: 'radar',
      data: [{
        value: types.map(type => riskTypeStats.medium[type] || 0),
        name: '中风险',
        areaStyle: {
          opacity: 0.3
        },
        itemStyle: {
          color: '#fa8c16'
        }
      }]
    },
    {
      name: '低风险',
      type: 'radar',
      data: [{
        value: types.map(type => riskTypeStats.low[type] || 0),
        name: '低风险',
        areaStyle: {
          opacity: 0.3
        },
        itemStyle: {
          color: '#52c41a'
        }
      }]
    }
  ].filter(item => item.data[0].value.some(v => v > 0)) // 只保留有数据的系列
  
  return {
    tooltip: {},
    legend: {
      data: ['高风险', '中风险', '低风险'],
      bottom: 10
    },
    radar: {
      indicator: indicators,
      shape: 'polygon',
      splitNumber: 5,
      axisName: {
        color: '#606266',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: ['#e6f7ff', '#bae7ff', '#91d5ff', '#69c0ff', '#40a9ff']
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(230, 247, 255, 0.3)', 'rgba(186, 231, 255, 0.3)', 'rgba(145, 213, 255, 0.3)', 'rgba(105, 192, 255, 0.3)', 'rgba(64, 169, 255, 0.3)']
        }
      },
      axisLine: {
        lineStyle: {
          color: '#d9d9d9'
        }
      }
    },
    series: series
  }
}

// 辅助函数：按日期分组数据
const groupDataByDate = () => {
  const grouped = {}
  
  if (!props.data || !Array.isArray(props.data)) {
    return grouped
  }
  
  props.data.forEach(item => {
    try {
      // 安全检查item对象
      if (!item || typeof item !== 'object') {
        return
      }
      
      // 安全处理日期
      const created_at = item.created_at
      if (!created_at) {
        return
      }
      
      const date = new Date(created_at).toLocaleDateString('zh-CN')
      if (!grouped[date]) {
        grouped[date] = {
          high: 0,
          medium: 0,
          low: 0
        }
      }
      
      const severity = item.severity || 'low'
      if (grouped[date][severity] !== undefined) {
        grouped[date][severity]++
      }
    } catch (error) {
      console.error('日期格式化失败:', error)
    }
  })
  
  return grouped
}

// 辅助函数：获取漏洞类型标签
const getVulnTypeLabel = (type) => {
  const labels = {
    'sql_injection': 'SQL注入',
    'xss': '跨站脚本',
    'info_leak': '信息泄露',
    'csrf': 'CSRF攻击',
    'cmd_injection': '命令注入',
    'file_upload': '文件上传',
    'auth_bypass': '认证绕过',
    'ssrf': '服务器请求伪造',
    'unknown': '未知类型'
  }
  return labels[type] || type
}

// 辅助函数：根据索引获取颜色
const getColorByIndex = (index) => {
  const colors = ['#1890ff', '#52c41a', '#fa8c16', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96', '#faad14']
  return colors[index % colors.length]
}

// 暴露方法给父组件
defineExpose({
  refresh: updateChartData,
  resize: handleResize
})
</script>

<style scoped>
.risk-chart-container {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-wrapper {
  flex: 1;
  min-height: 300px;
  width: 100%;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-text {
  font-size: 14px;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .chart-controls .el-select {
    flex: 1;
  }
  
  .chart-legend {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .risk-chart-container {
    min-height: 300px;
  }
  
  .chart-wrapper {
    min-height: 200px;
  }
}

/* 深色模式适配 */
:deep(.dark) .chart-header h3 {
  color: #d1d5db;
}

:deep(.dark) .legend-text {
  color: #9ca3af;
}

:deep(.dark) .chart-legend {
  border-top-color: #374151;
}

/* 自定义滚动条 */
.chart-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.chart-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.chart-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chart-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

:deep(.dark) .chart-wrapper::-webkit-scrollbar-track {
  background: #374151;
}

:deep(.dark) .chart-wrapper::-webkit-scrollbar-thumb {
  background: #4b5563;
}

:deep(.dark) .chart-wrapper::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}
</style>